<template>
<div>
  <el-button @click="onSubmit(1)">刷新车辆信息 <i class="el-icon-circle-plus-outline"></i></el-button>

  <el-button type="text" @click="dialogFormVisible = true">添加车辆信息</el-button>

  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="颜色">
      <el-input v-model="formInline.color" placeholder="车辆颜色" clearable @clear="onSubmit(1)"></el-input>
    </el-form-item>
    <el-form-item label="品牌">
      <el-input v-model="formInline.brand" placeholder="车辆品牌" clearable @clear="onSubmit(1)"></el-input>
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="onSubmit(1)">查询</el-button>
    </el-form-item>
  </el-form>

  <el-dialog title="添加信息" :visible.sync="dialogFormVisible">
    <el-form :model="form" :rules="rules" ref="rulesForm" label-width="100px" class="demo-ruleForm">
      <el-form-item label="车牌号"  prop="plateNum">
        <el-input v-model="form.plateNum" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="颜色" prop="color">
        <el-input v-model="form.color" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="品牌"  prop="brand">
        <el-input v-model="form.brand" autocomplete="off"></el-input>
      </el-form-item>
      <el-form-item label="车主电话" prop="phone">
        <el-input v-model="form.phone" autocomplete="off" ></el-input>
      </el-form-item>
      停车类型
        <el-radio v-model="form.tempCar" :label="1">临时停车</el-radio>
        <el-radio v-model="form.tempCar" :label="0">长时间停车</el-radio>
      <el-form-item label="备注" prop="remark">
        <el-input v-model="form.remark" autocomplete="off"></el-input>
      </el-form-item>


    <div class="block">
      <span class="demonstration">时间</span>
      <el-date-picker
          v-model="form.endTime"
          type="date"
          placeholder="选择日期">
      </el-date-picker>
    </div>
    是否离开
    <el-radio v-model="form.leave" :label="1">否</el-radio>
    <el-radio v-model="form.leave" :label="0">是</el-radio>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleContinue">确 定</el-button>
    </div>

  </el-dialog>

  <el-table
      :data="pageInfo.list" v-loading="loading"
      style="width: 100%"
      :row-class-name="tableRowClassName">
    <el-table-column
        prop="plateNum"
        label="车牌号"
        width="180">
    </el-table-column>
    <el-table-column
        prop="color"
        label="颜色"
        width="120">
    </el-table-column>
    <el-table-column
        prop="brand"
        label="品牌"
        width="120">
    </el-table-column>
    <el-table-column
        prop="startTime"
        label="入场时间"
        :formatter="formatDate"
        width="180"
    ></el-table-column>
    <el-table-column
        prop="endTime"
        label="出场时间"
        :formatter="formatDate"
        width="180"
    ></el-table-column>
    <el-table-column
        prop="phone"
        label="车主电话"
        width="120">
    </el-table-column>
    <el-table-column label="停车类型（常驻，临时）">
      <template #default="scope">
        <span v-if="scope.row.tempCar">临时</span>
        <span v-else>常驻</span>
      </template>
    </el-table-column>
    <el-table-column label="是否离开">
      <template #default="scope">
        <span v-if="scope.row.leave">未离开</span>
        <span v-else>离开</span>
      </template>
    </el-table-column>
    <el-table-column
        prop="remark"
        label="备注（选填）">
    </el-table-column>
    <el-table-column
        prop="updateTime"
        label="更新时间"
        :formatter="formatDate"
    ></el-table-column>
    <!-- 逻辑删除 -->
    <el-table-column
        fixed="right"
        label="操作"
        width="100">
      <template slot-scope="scope">
        <el-button @click="handleClick(scope.$index,scope.row)" type="text" size="small">更新</el-button>
        <el-button @click="delect(scope.$index,scope.row)" type="text" size="small">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <!-- 分页 -->
  <el-pagination class="pageNum"
      background
      layout="prev, pager, next"
      @current-change="handlePageNum"
      :current-page="pageInfo.pageNum"
      :page-size="pageInfo.pageSize"
      :total="pageInfo.total"> <!-- 确保绑定到正确的总记录数 -->
  </el-pagination>
</div>
</template>

<script>
import {list} from "postcss";

export default {
  name: "CAR",
  computed: {
  },
  data() {
     return {
       dialogFormVisible: false,
       form: {
         id:'',
         plateNum: '',
         color: '',
         brand:'',
         startTime:'',
         endTime:'',
         phone: '',
         type: '',
         tempCar: '',
         leave:'',
         remark:'',
         updateTime:'',
       },
       list:[],
       pageInfo:{},
       loading: false,

       rules:{
         plateNum:[
           { required:true ,message :"请输入车牌号" ,trigger:"blur" },
           {
             validator:(rule, value, callback) => {
               let Num = /^[京津沪渝冀豫云辽黑湘皖鲁新苏浙赣鄂桂甘晋蒙陕吉闽贵粤青藏川宁琼使领A-Z]{1}[A-Z]{1}[A-HJ-NP-Z0-9]{5}$/
               if (!Num.test(value)) {
                 callback(new Error("车牌号不合规矩"))

               } else {
                 callback()
               }
             },trigger: "blur",
           }
         ],
         phone:[
           { required:true ,message:"请输入手机号" ,trigger:"blur" },
           {
             validator:(rule, value, callback) => {
               let aaa = /^1[3-9]\d{9}$/
               if (!aaa.test(value)) {
                 callback(new Error("手机号不合规"));
               }else {
                 callback()
               }
             },trigger: "blur",
           }
         ],
         color:[
           { required : true , message:"请输入颜色", trigger:"blur" },
         ],
         brand:[
           { required:true , message:"请输入型号", trigger:"blur" },
         ]
       },
       formInline: {
         color: "",
         brand: "",
       }

     }

  },
  created(){
    this.onSubmit(1)
  },
  methods: {
    tableRowClassName({row, rowIndex}) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleContinue() {
      this.dialogFormVisible = true;
      this.axios.post("car/add",this.form).then((response) => {
        this.form={}
      })
    },
    delect(index, row) {
      this.$confirm('你真的要删除这条数据吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
      this.axios.delete("car/"+ row.id).then((response) => {
        this.onSubmit(1)
      })
      })
    },
    formatDate(row, column, cellValue) {
      if (!cellValue) return '';
      const date = new Date(cellValue);
      const year = date.getFullYear();
      const month = String(date.getMonth() + 1).padStart(2, '0');
      const day = String(date.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },

    onSubmit(pageNum){
      this.loading=true;
      let params = {pageNum:pageNum};
      this.axios.post("car/pageInfo",this.formInline,{params:params}).then((response) => {
        this.pageInfo = response.data.pageInfo;
        this.loading = false;
      })

    },
    handlePageNum(pageNum) {
      this.onSubmit(pageNum);
    },
    handleClick(index,row){
      this.$router.push({path:"/admin/HandleUpdate",query:{id:row.id}});
    }
  }
}

</script>

<style>
.pageNum{
  display: flex;
  justify-content: center; /* 水平居中 */
  padding-top: 30px;
}
.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>